<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>picture_upload</title>
<link rel="stylesheet" type="text/css" href="/networkforum/css/base.css" />
<link rel="stylesheet" type="text/css" href="/networkforum/css/picture_main.css" />
<script type="text/javascript" src="/networkforum/js/picture_upload.js"></script>
<script type="text/javascript" src="/networkforum/js/myajax.js"></script>
<!–[if lt IE9]> 
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]–>
<style type="text/css">
	.pictureUpload{
		width:99%;
		min-height:500px;
		max-height:1100px;
		height:auto;
		overflow:hidden;
	}
	h2{
		width:100%;
		height:30px;
		line-height:30px;
		vertical-align:middle;
	}
	form{
		width:100%;
		height:30px;
		text-align:left;
		border-bottom:1px red solid;
	}
	a{
		width:100px;
		height:25px;
		border:1px solid #ccc;
		display:inline-block;
		position:relative;
		background-color:#92B1B4;
		text-align:center;
		line-height:25px;
		vertical-align:middle;
		overflow:hidden;
	}
	.file{
		border:none;
		opacity: 0;  /*实现的关键点 */ 
		filter:alpha(opacity=0); /*兼容IE */ 
		position:absolute;
		left:0px;
		top:0px;
		z-index:999;
	}
	label{
		color:red;
		font-size:12px;
	}
	#submit{
		float:right;
		background-color:#fff;
		display:inline-block;
		line-height:20px;
		vertical-align:middle;
		margin-right:5px;
		padding: 3px 15px;
	}
	input:hover{
		cursor:pointer;
	}
	.pictureHandle{
		height:30px;
		width:100%;
		text-align:left;
		line-height:30px;
		vertical-align:middle;
		margin:15px 0px;	

	}
	.choice{
		width:100px;
		float:left;
	}
	#sum{
		float:right;
		margin-right:5px;
	}
	.pictureShow{
		width:99%;
		min-height:860px;
		height:auto;
		border:1px dashed red;
		position:relative;
		background-color:#F3E4CB;
		overflow:hidden;
		padding-top:5px;
	}
	.picutreContainer{
		width:159px;
		height:170px;		
		margin:2px;
		float:left;
		position:relative;
		text-align: left;
	}
	.photo{
		min-width:100px;
		min-height:100px;
		max-width:147px;
		max-height:158px;
		width:auto;
		height:auto;
		display:inline-block;		
		position: relative;
		background-color:#fff;
		padding:5px;
		border:1px solid #ccc;
	}
	.photo:hover{
		cursor:pointer;
	}
	.hook{
		width:12px;
		height:10px;
		position:absolute;
		background-color:none;
		left: 0px;
		top: 0px;
		z-index: 999;
	}
	.groupName{
		width: 100px;
		height: 25px;
		cursor: default;
		text-align: center;
		line-height: 30px;
		vertical-align: middle;
		margin-right: 15px;
	}
	.groupinner{
		width: 100px;
		min-height: 10px;
		height: auto;
		background-color: #fff;
		position: absolute;
		z-index: 999;
		left: 5px;
		top: 57px;
		overflow: hidden;
	}
	.groupUl{
		width: 90%;
		height: auto;
		float: left;
	}
	.groupUl li{
		float: none;
		text-align: left;
		border-bottom: 1px dotted #ccc;
		height: 20px;
		width: 100%;
		padding: 0px 10px;
	}
	.groupUl li:hover{
		background-color: #ccc;
	}
	.uploadBack{
		width: 80%;
		height: 90%;
		overflow: hidden;
		float: left;
	}
</style>
</head>

<body>
	<section class="pictureUpload" id="outer">
		<section class="groupinner" id="groupinner" style = "display:none;">
			<ul class="groupUl" id="groupUl">
			</ul>
		</section>
    	<h2>上传图片</h2>
        <form target="uploadBack" method="post" enctype="multipart/form-data" action="" onsubmit="return uploadHandle(this);">
        	<input name="groupName" class="groupName" id="groupName" type="text" value="选择相册" readonly onclick="groupNameHandle('');"/>
        	<a id="fileLink" href="javascript:void(0);">
	        	<span>添加图片</span>
                <input type="file" onchange="show(event)" name="file" id="file" class="file" multiple="multiple"/>
            </a>
            <label>(按着ctrl键选中多个文件)</label>
            <input type="text" style="display: none;" id="index" name="index"/>
        	<input id="submit" type="submit" value="上传"/>
        </form>
        <section class="pictureHandle">
	        <h2 class="choice">图片展示板</h2> 
			<iframe id="uploadBack" class="uploadBack" name="uploadBack" style="">				
			</iframe>
            <label id="sum">总共0张</label>   
        </section>
        <section id="pictureShow" class="pictureShow">
	        
        </section>
    </section>
</body>
</html>
